import { defineComponent, inject, onBeforeMount, onMounted, ref } from "vue";
import { TabsContext, TabsKey } from "./types";

export default defineComponent({
  name: 'TabPanel',
  props: {
    name: { type: String, required: true }
  },
  setup(props, { slots }) {
    const parent = inject<TabsContext>(TabsKey);
    const show = ref(false);
    const changeShow = (visible: boolean) => {
      show.value = visible;
    }
    onMounted(() => {
      parent?.addPane({
        name: props.name,
        titleSlot: slots.title,
        changeShow
      })
    });
    onBeforeMount(() => [
      parent?.removePane(props.name)
    ])
    return () => {
      return (
        <div class="pane" v-show={ show.value }>
          { slots.default!() }
        </div>
      )
    }
  }
})

